import "./login.css"

import { useState } from "react"
import { useNavigate } from "react-router-dom"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, message, Space } from 'antd';
import { getLogin } from "../../tools/ajax"



export default () => {

    const navigate = useNavigate()
    const [messageApi, contextHolder] = message.useMessage();

    const onFinish = async (values) => {
        console.log('Received values of form: ', values);

        var { data: res } = await getLogin({
            "userName": values.username,
            "password": values.password
        })

        console.log(res);


        if (res.code) {
            console.log("正确");
            sessionStorage.setItem("setToken", res.token);
            messageApi.open({
                type: 'success',
                content: '登录成功,欢迎饿滴宝贝! ' + res.userName,
            });
            
            setTimeout(() => {
                navigate("/home")
            }, 1000)

        } else {
            console.log("错误");

            messageApi.open({
                type: 'error',
                content: '用户名或密码错误',
            });
        }

    };

    return (
        <div className="about">
            <h1>这是登录页</h1>
            {contextHolder}
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        },
                        {
                            pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{2,8}$/,
                            message: "请输入2位到8位的,汉字、数字、字母、下划线！"
                        }
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"

                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                        {
                            pattern: /^[a-zA-Z0-9]{3,12}$/,
                            message: "请输入3到12位的数字或字母!"
                        }

                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>

                {/* <Form.Item
                    label="Fail"
                    hasFeedback
                    validateStatus="error"
                    help="Should be combination of numbers & alphabets"
                >
                    <Input placeholder="unavailable choice" id="error2" />
                </Form.Item> */}


                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                    {/* Or <a href="">register now!</a> */}
                </Form.Item>
            </Form>
        </div>
    )
}